<style>
    .progress{height:80px;background-color:#fff;}
    .progress-nav{display:flex;flex-direction:column;align-items:center;width:20%;font-size:12px;}
    .progress-nav .step{width:100%;margin-bottom:5px;}
    .progress-nav .step span{display:block;width:30px;height:30px;text-align:center;line-height:30px;border-radius:100%;background:#dfdfdf;font-size:14px;}
    .progress-nav .step i{height:1px;background:#dfdfdf;display:block;width:15px;}
    .progress-nav .step i.cur{background:#3caaff;}
    .progress-nav.cur{color:#3caaff;}
    .progress-nav.cur .step span{background:#3caaff;color:#fff;}
</style>
<template>
  <div class="progress flex flex-justify-around flex-align-center border-bottom">
    <div :class="['progress-nav',step>=1?'cur':'']">
      <div class="step flex flex-justify-between flex-align-center">
        <i style="background:none;"></i>
        <span>1</span>
        <i :class="[step>1?'cur':'']"></i>
      </div>
      <span>银行卡</span>
    </div>
    <div :class="['progress-nav',step>=2?'cur':'']">
      <div class="step flex flex-justify-between flex-align-center">
        <i :class="[step>1?'cur':'']"></i>
        <span>2</span>
        <i :class="[step>2?'cur':'']"></i>
      </div>
      <span>基本信息</span>
    </div>
    <div :class="['progress-nav',step>=3?'cur':'']">
      <div class="step flex flex-justify-between flex-align-center">
        <i :class="[step>2?'cur':'']"></i>
        <span>3</span>
        <i :class="[step>3?'cur':'']"></i>
      </div>
      <span>工作信息</span>
    </div>
    <div :class="['progress-nav',step>=4?'cur':'']">
      <div class="step flex flex-justify-between flex-align-center">
        <i :class="[step>3?'cur':'']"></i>
        <span>4</span>
        <i :class="[step>4?'cur':'']"></i>
      </div>
      <span>社交信息</span>
    </div>
    <div :class="['progress-nav',step>=5?'cur':'']">
      <div class="step flex flex-justify-between flex-align-center">
        <i :class="[step>4?'cur':'']"></i>
        <span>5</span>
        <i style="background:none;"></i>
      </div>
      <span>真人检测</span>
    </div>
  </div>
</template>
<script>
    export default {
      props: {
        step: {
          type: [Number],
          default: 1
        }
      }
    }
</script>
